$(function() {
  var pages = 1; // 页数
  var pageSize = 4; // 每页数据条数
  function again() {
    $.ajax({
      type: "get",
      url: "/category/querySecondCategoryPaging",
      data: {
        page: pages,
        pageSize: pageSize
      },
      dataType: "json",
      success: function(res) {
        console.log(res);
        $("tbody").html(template("tmp", res));
        paginator(res.total);
      }
    });
  }

  again();

  //分页
  function paginator(total) {
    $("#paginator").bootstrapPaginator({
      bootstrapMajorVersion: 3, //默认是2，如果是bootstrap3版本，这个参数必填
      currentPage: pages, //当前页
      totalPages: Math.ceil(total / pageSize), //总页数
      size: "small", //设置控件的大小，mini, small, normal,large
      onPageClicked: function(event, originalEvent, type, page) {
        //为按钮绑定点击事件 page:当前点击的按钮值
        pages = page;
        again();
      }
    });
  }

  //添加分类

  // 下拉框
  // 向后台 发送请求 获取 所有的 一级分类的数据  把一级分类中的数据 渲染到 下拉列表中
  $.ajax({
    type: "get",
    url: "/category/queryTopCategoryPaging",
    data: {
      page: 1,
      pageSize: 100
    },
    dataType: "json",
    success: function(res) {
      // console.log(res);
      $(".tow-list").html(template("pull-down", res));
    }
  });
  // 渲染成功后 为每一项添加点击事件 点击那一项 当前的一项中的内容 显示在 按钮中 并把次项中的 id 存储在 隐藏域中
  $(".tow-list").on("click", "a", function() {
    $(".btn-tow").text($(this).text());
    $(".categoryId").val($(this).data("id"));
    console.log($(this).data("id"));
    $(".add-form")
      .data("bootstrapValidator")
      .updateStatus("categoryId", "VALID");
  });

  // 上传图片
  $("#file").fileupload({
    dataType: "json",
    //e：事件对象
    //data：图片上传后的对象，通过data.result.picAddr可以获取上传后的图片地址
    done: function(e, data) {
      // console.log(data.result.picAddr);
      var src = data.result.picAddr;
      $(".file-img").attr("src", src);
      $(".brandLogo").val(src);
      $(".add-form")
        .data("bootstrapValidator")
        .updateStatus("brandLogo", "VALID");
    }
  });

  // 校验
  $("#form1").bootstrapValidator({
    //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
    excluded: [":disabled"],

    //2. 指定校验时的图标显示，默认是bootstrap风格
    feedbackIcons: {
      valid: "glyphicon glyphicon-ok",
      invalid: "glyphicon glyphicon-remove",
      validating: "glyphicon glyphicon-refresh"
    },
    //3. 指定校验字段
    fields: {
      //校验用户名，对应name表单的name属性
      categoryId: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请选择一级分类"
          }
        }
      },
      brandName: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请输入二级分类"
          }
        }
      },
      brandLogo: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请上传图片"
          }
        }
      }
    }
  });

  $("#form1").on("success.form.bv", function(e) {
    e.preventDefault();
    console.log(123);
    //使用ajax提交逻辑
    var str = $("#form1").serialize();
    console.log(str);
    $.ajax({
      type: "post",
      url: "/category/addSecondCategory",
      data: str,
      dataType: "json",
      success: function(res) {
        console.log(res);
        again();
        // 重置
        $("#form1")
          .data("bootstrapValidator")
          .resetForm(true);
        $(".btn-tow").text("请选择一级分类");
        $(".file-img").attr("src", "./images/none.png");
        // 隐藏  模态框
        $(".tow-modal").modal("hide");
      }
    });
  });
});
